<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
    <title>监控</title>
    <link rel="stylesheet" href="{% static "css/semantic.min.css" %}"></link>
    <link rel="stylesheet" href="{% static "css/icon.min.css" %}"></link>
</head>
<body>
<h2 class="ui header inverted big" style="color:#FFF;background-color:#00b5ad;padding:1em;margin:0;">
    MongooCrawler分布式爬虫系统</h2>
<div class="ui bottom attached segment pushable">
    <div class="ui large secondary vertical pointing menu left dimmed"
         style="width: 13.5%;float:left;height: 100% !important;max-height:  100% !important;">
        <a href="/" class="item text">
            首页
        </a>
        <a href="/clients" class="item text">
            客户端
        </a>
        <a href="/business" class="active item">
            <i class="ui icon user"></i>
            业务
        </a>
    </div>
    <div class="pusher" style="width:86%;">
        <div class="ui large breadcrumb" style="margin-left:2em;margin-top:1em;">
            <a class="section">主页</a>
            <i class="right chevron icon divider"></i>
            <a class="section">业务</a>
        </div>
        <div class="ui divider"></div>
        <div id="toast"></div>
        <div class="ui center aligned">
            <div class="ui buttons">
                <button class="ui primary button" id="crawl_btn">开始爬取</button>
                <button class="ui primary button" onclick="javascript:window.location.href='map'"><i
                        class="marker icon"></i>地图
                </button>
            </div>

            <table class="ui celled table">
                <thead>
                <tr>
                    <th>房源名</th>
                    <th>地址</th>
                    <th>面积</th>
                    <th>单价(元/平方米)</th>
                    <th>总价(万元)</th>
                </tr>
                </thead>
                <tbody>
                {% for house in houses.data %}
                    <tr>
                        <td>{{ house.name }}</td>
                        <td>{{ house.address }}</td>
                        <td>{{ house.area }}</td>
                        <td>{{ house.price }}</td>
                        <td>{{ house.amount }}</td>
                    </tr>
                {% endfor %}
                </tbody>
                <tfoot>
                <tr>
                    <th colspan="5">
                        <div class="ui right floated pagination menu">
                            <a href="?page={{ houses.pager.prev_page }}" class="icon item">
                                <i class="left chevron icon"></i>
                            </a>
                            <a class="item">第{{ houses.pager.cur_page }}页</a>
                            <a href="?page={{ houses.pager.next_page }}" class="icon item">
                                <i class="right chevron icon"></i>
                            </a>
                        </div>
                    </th>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
<script type="text/javascript"
        src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="{% static 'js/semantic.min.js' %}"></script>
<script type="text/javascript">
    $(function () {
        $("#crawl_btn").click(function () {
            //禁用按钮
            $("#crawl_btn").attr("disabled", "disabled");
            var i = 30;
            var interval = window.setInterval(function () {
                $("#crawl_btn").html(i + "s后点击");
                --i;
                if (i === 0) {
                    window.clearInterval(interval);
                    $("#crawl_btn").html("开始爬取");
                    $("#crawl_btn").attr("disabled", false);
                    $("#toast").html("");
                }
            }, 1000);
            $.ajax({
                url: "/business/lianjia/crawl",
                type: "GET",
                dataType: "json",
                cache: false,
                success: function (data) {
                    if (data && data.status) {
                        if (data.status.code == 200) {
                            var html = "<div class=\"ui icon message\">" +
                                "  <i class=\"notched circle loading icon\"></i>" +
                                "  <div class=\"content\">" +
                                "    <div class=\"header\">稍候 </div>" +
                                "    <p>爬虫正在爬取数据。</p>" +
                                "  </div>\n" +
                                "</div>"
                            $("#toast").html(html);
                        } else {
                            var html = "<div class=\"ui warning message\">" +
                                "  <i class=\"close icon\"></i>" +
                                "  <div class=\"header\">" + data.status.msg + "</div>"
                            $("#toast").html(html);
                        }
                    }
                },
                error: function () {
                    alert("请求错误");
                }
            });
        });
    });

</script>
</body>
</html>